<template>
	<div class="learning_score">
		<p>{{ yearNumber }}年完成学时：</p>
		<h4>{{ studyDuration }}</h4>
	</div>
</template>

<script>
import moment from 'moment';
import { queryUserDuration } from '@/api/system/tbSysUser';
export default {
	props: {
		userAccount: { type: String, default: '' }
	},
	data() {
		return {
			studyDuration: 0
		};
	},
	computed: {
		yearNumber() {
			return moment().format('YYYY');
		},
		dateRange() {
			let yearMoment = moment(this.yearNumber);
			let endTime = yearMoment.endOf('year').format('YYYY-MM-DD');
			let startTime = yearMoment.startOf('year').format('YYYY-MM-DD');
			return { startTime, endTime };
		}
	},
	mounted() {
		this.queryUserStudyDuration();
	},
	methods: {
		async queryUserStudyDuration() {
			let page = { page: 1, limit: 1 };
			let params = { ...page, ...this.dateRange, account: this.userAccount };
			let result = await queryUserDuration(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.studyDuration = datas?.totalStudyDuration || '0.0';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.learning_score {
	flex-shrink: 0;
	padding: 6px 0;
	p {
		color: #606266;
		line-height: 18px;
	}
	h4 {
		font-size: 40px;
		line-height: 1;
		margin-top: 16px;
		color: var(--primary);
	}
}
@media screen and (max-width: 767px) {
	.learning_score {
		display: flex;
		align-items: center;
		margin-top: 10px;
		width: 100%;
		h4 {
			margin-top: 0;
		}
	}
}
</style>
